<template>
  <el-select
    v-model="countyValue"
    filterable
    clearable
    @change="countyChange"
    placeholder="请选择区/县"
  >
    <el-option
      v-for="item in countyList"
      :key="item.id"
      :label="item.countyName"
      :value="item.countyCode"
    >
    </el-option>
  </el-select>
</template>

<script>
import { getCounty } from '@/api/after-sale/common/common'
export default {
  model: {
    props: 'value',
    event: 'input',
  },
  props: {
    value: {
      default: '',
    },
    cityCode: '', //城市id
  },
  data() {
    return {
      countyValue: '',
      countyList: [],
    }
  },
  watch: {
    value: function (newValue, oldValue) {
      console.log('检测到value', newValue)
      this.countyValue = newValue
      this.$emit('input', newValue)
    },
    cityCode: function (newValue, oldValue) {
      this.countyList = []
      this._getCounty()
      if (oldValue && newValue != oldValue) this.countyValue = ''
      
    },
  },
  methods: {
    //区县变更
    countyChange(value) {
      this.$emit('input', value)
    },
    //获取区县列表
    async _getCounty() {
      let { success, data } = await getCounty(this.cityCode)
      if (success) this.countyList = data
    },
  },
  created() {
    if (this.cityCode) {
      this._getCounty()
      if (this.value) {
        this.countyValue = this.value
      }
    }
  },
}
</script>